<template>
  <div class="main-header" v-if="!getIsPhone">
    <header-top></header-top>
    <header-nav-main 
      :sideNavData="sideNavData" 
      :navInfo="navInfo" 
      class="header-nav-adjust"
    >
    </header-nav-main>
  </div>
</template>

<script>
import HeaderTop from '@/components/base/header-top/header-top'
import HeaderNavMain from '@/components/base/header-nav-main/header-nav-main'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTop,
    HeaderNavMain
  },
  data() {
    return {
      // main-header导航信息
      navInfo: {
        left: [
          {
            id: 1,
            icon: 'iconnav_tuijian',
            text: '热门推荐',
            position: 'left',
            path: '/hot'
          }
        ],
        center: [
          {
            id: 1,
            icon: 'iconnav_shouye',
            text: '首页',
            position: 'left',
            path: '/home'
          },
          {
            id: 2,
            icon: 'iconnav_goucai',
            text: '购彩',
            position: 'center',
            path: '/lotterys'
          },
          {
            id: 3,
            icon: 'iconnav_shixun',
            text: '视讯',
            position: 'center',
            path: '/vnews'
          },
          {
            id: 4,
            icon: 'iconnav_dianzi',
            text: '电子',
            position: 'center',
            path: '/electronics'
          },
          {
            id: 5,
            icon: 'iconnav_saishi',
            text: '赛事',
            position: 'center',
            path: '/matches'
          },
          
          {
            id: 6,
            icon: 'iconnav_qipai',
            text: '棋牌',
            position: 'center',
            path: '/cards'
          },
          {
            id: 7,
            icon: 'iconnav_huodong',
            text: '活动',
            position: 'center',
            path: '/activity'
          }
        ],
        right: [
          {
            id: 8,
            icon: 'iconnav_wodezhanghu',
            text: '我的账户',
            position: 'right',
            path: '/my-account'
          },
          // {
          //   id: 9,
          //   icon: 'iconnav_shoujigoucai',
          //   text: '手机购彩',
          //   position: 'right',
          //   path: '/mobile'
          // }
        ]
      },
      // 侧边栏tab数据
      sideNavData: {
        lotterys: [
          {
          id: 1,
          navItem: [
            {
              id: 1,
              name: "时时彩"
            },
            {
              id: 2,
              name: '最火爆的快彩'
            }
          ],
          subLotterys: [
              {
                id: 1,
                tab: '时时彩',
                type: '重庆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_chongqingshishi',
                path: '/select-number/cqssc'
              },
              {
                id: 2,
                tab: '时时彩',
                type: '急速时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_jisushishicai'
              },
              {
                id: 3,
                tab: '时时彩',
                type: '天津时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                icon: 'iconicon_tianjinshishica'
              },
              {
                id: 4,
                tab: '时时彩',
                type: '新疆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                icon: 'iconicon_xinjiangshishic'
              },
            ],
          icon: 'iconindex_shishicai'
          },
          {
            id: 2,
            navItem: [
              {
                id: 1,
                name: "赛车"
              },
              {
                id: 2,
                name: '彩友中200注'
              }
            ],
            subLotterys: [
                    {
                      id: 1,
                      tab: '赛车',
                      type: '北京赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      path: '/select-number/bjsc',
                      bg: require('@/assets/imgs/caizhong_bj_06.svg'),
                      icon: 'iconicon_jisupk'
                    },
                    {
                      id: 2,
                      tab: '赛车',
                      type: '幸运飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: 'iconCZ_Icon_xingyunfeiti'
                    },
                    {
                      id: 3,
                      tab: '赛车',
                      type: '极速赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_beijingsaich'
                    },
                    {
                      id: 4,
                      tab: '赛车',
                      type: '极速飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: ''
                    },
                  ],
            icon: 'iconindex_saiche'
          },
          {
            id: 3,
            navItem: [
              {
                id: 1,
                name: "11选5"
              },
              {
                id: 2,
                name: '4500万派奖',
                highlight: true
              }
            ],
            subLotterys: [
                    {
                      id: 1,
                      tab: '11选5',
                      type: '山东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                      icon: 'iconicon_shandongxuan'
                    },
                    {
                      id: 2,
                      tab: '11选5',
                      type: '广东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_07.svg'),
                      icon: 'iconicon_guangdongxuan'
                    },
                    {
                      id: 3,
                      tab: '11选5',
                      type: '急速11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      path: '/select-number/11xuan5',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_jisuxuan'
                    },
                  ],
            icon: 'iconindex_xuan'
          },
          {
            id: 4,
            navItem: [
              {
                id: 1,
                name: "快三"
              },
              {
                id: 2,
                name: '投掷筛子'
              },
              {
                id: 3,
                name: '轻松中奖'
              }
            ],
            subLotterys: [
                {
                  id: 1,
                  type: '幸运快三',
                  tab: '快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  bg: require('@/assets/imgs/caizhong_bj_03.svg'),
                  icon: 'iconLy_kuai_xingyun',
                  path: '/select-number/kuaisan'
                },
                {
                  id: 2,
                  tab: '快三',
                  type: '安徽快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                  icon: 'iconicon_anhuikuaisan'
                },
                {
                  id: 3,
                  tab: '快三',
                  type: '甘肃快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                  icon: 'iconLy_kuai_gansu'
                },
              ],
            icon: 'iconindex_kuai'
          },
        ],
        others: [
          {
            id: 5,
            navItem: [
              {
                id: 1,
                name: "AG视讯国际厅",
                active: true
              },
              {
                id: 2,
                name: '旗舰厅'
              },
              {
                id: 3,
                name: '欧洲厅'
              },
              {
                id: 4,
                name: '竟咪'
              },
              {
                id: 5,
                name: '包桌'
              },
              {
                id: 6,
                name: '多台'
              }
            ],
            icon: '',
            high: 'true',
            color: 'yellow'
          },
          {
            id: 6,
            navItem: [
              {
                id: 1,
                name: "AG电子"
              },
              {
                id: 2,
                name: '皇冠体育'
              },
              {
                id: 3,
                name: '斗牛'
              }
            ],
            icon: '',
            high: true,
            color: 'red'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus">
  @import '~@/assets/styles/variables.styl'
  .main-header
    width 100%
    background-color #fff
    position fixed 
    top 0
    left 0
    right 0
    z-index 1000
    .header-nav-adjust
      .header-nav-inner
        .nav-left 
          width 130px
          display flex
          justify-content space-between
      .nav-left-item
        &:last-child
          text-align right
    
        

</style>